<template>
  <div id="scatterChart" style="height: 700px; width: 1000px"></div>
</template>

<script>
import * as echarts from 'echarts'
import {cluster1} from "../../../http/request";
export default {
  name: "index.vue",
  data() {
    return {
      y1: [],
      y2: [],
      num_1: [],
      num_2: []
    }
  },
  mounted() {
    this.scatterChart();
    cluster1().then(res => {
      for(let r in res.data) {
        console.log(res.data[r])
        this.y1.push(res.data[r].y1)
        this.y2.push(res.data[r].y2)
      }

      console.log(this.y1);
      console.log(this.y2);
      this.scatterChart();
    })
  },
  methods: {
    scatterChart(){
      let scatterChart = echarts.init(document.getElementById('scatterChart'));

      scatterChart.setOption({
        title: {
          text: '出入站站点散点图'
        },
        legend:{
          data: ["出站", "入站"],
          textStyle: {fontSize: 16}
        },
        xAxis: {
          max: 169,
          width: '1000px',
          formatter:'{d}站'
        },
        yAxis: {
          width: '1000px',
          formatter:'{d}人'
        },
        series: [
          {
            name: '出站',
            symbolSize: 10,
            data:  [
              [1,this.y1[0]], [2,this.y1[1]], [3,this.y1[2]], [4,this.y1[3]], [5,this.y1[4]], [6,this.y1[5]], [7,this.y1[6]], [8,this.y1[7]], [9,this.y1[8]],[10,this.y1[9]],
              [11,this.y1[10]], [12,this.y1[11]], [13,this.y1[12]], [14,this.y1[13]], [15,this.y1[14]], [16,this.y1[15]], [17,this.y1[16]], [18,this.y1[17]], [19,this.y1[18]],[20,this.y1[19]],
              [21,this.y1[20]], [22,this.y1[21]], [23,this.y1[22]], [24,this.y1[23]], [25,this.y1[24]], [26,this.y1[25]], [27,this.y1[26]], [28,this.y1[27]], [29,this.y1[28]],[30,this.y1[29]],
              [31,this.y1[30]], [32,this.y1[31]], [33,this.y1[32]], [34,this.y1[33]], [35,this.y1[34]], [36,this.y1[35]], [37,this.y1[36]], [38,this.y1[37]], [39,this.y1[38]],[40,this.y1[39]],
              [41,this.y1[40]], [42,this.y1[41]], [43,this.y1[42]], [44,this.y1[43]], [45,this.y1[44]], [46,this.y1[45]], [47,this.y1[46]], [48,this.y1[47]], [49,this.y1[48]],[50,this.y1[49]],
              [51,this.y1[50]], [52,this.y1[51]], [53,this.y1[52]], [54,this.y1[53]], [55,this.y1[54]], [56,this.y1[55]], [57,this.y1[56]], [58,this.y1[57]], [59,this.y1[58]],[60,this.y1[59]],
              [61,this.y1[60]], [62,this.y1[61]], [63,this.y1[62]], [64,this.y1[63]], [65,this.y1[64]], [66,this.y1[65]], [67,this.y1[66]], [68,this.y1[67]], [69,this.y1[68]],[70,this.y1[69]],
              [71,this.y1[70]], [72,this.y1[71]], [73,this.y1[72]], [74,this.y1[73]], [75,this.y1[74]], [76,this.y1[75]], [77,this.y1[76]], [78,this.y1[77]], [79,this.y1[78]],[80,this.y1[79]],
              [81,this.y1[80]], [82,this.y1[81]], [83,this.y1[82]], [84,this.y1[83]], [85,this.y1[84]], [86,this.y1[85]], [87,this.y1[86]], [88,this.y1[87]], [89,this.y1[88]],[90,this.y1[89]],
              [91,this.y1[90]], [92,this.y1[91]], [93,this.y1[92]], [94,this.y1[93]], [95,this.y1[94]], [96,this.y1[95]], [97,this.y1[96]], [98,this.y1[97]], [99,this.y1[98]],[100,this.y1[99]],
              [101,this.y1[100]], [102,this.y1[101]], [103,this.y1[102]], [104,this.y1[103]], [105,this.y1[104]], [106,this.y1[105]], [107,this.y1[106]], [108,this.y1[107]], [109,this.y1[108]],[110,this.y1[109]],
              [111,this.y1[110]], [112,this.y1[111]], [113,this.y1[112]], [114,this.y1[113]], [115,this.y1[114]], [116,this.y1[115]], [117,this.y1[116]], [118,this.y1[117]], [119,this.y1[118]],[120,this.y1[119]],
              [121,this.y1[120]], [122,this.y1[121]], [123,this.y1[122]], [124,this.y1[123]], [125,this.y1[124]], [126,this.y1[125]], [127,this.y1[126]], [128,this.y1[127]], [129,this.y1[128]],[130,this.y1[129]],
              [131,this.y1[130]], [132,this.y1[131]], [133,this.y1[132]], [134,this.y1[133]], [135,this.y1[134]], [136,this.y1[135]], [137,this.y1[136]], [138,this.y1[137]], [139,this.y1[138]],[140,this.y1[139]],
              [141,this.y1[140]], [142,this.y1[141]], [143,this.y1[142]], [144,this.y1[143]], [145,this.y1[144]], [146,this.y1[145]], [147,this.y1[146]], [148,this.y1[147]], [149,this.y1[148]],[150,this.y1[149]],
              [151,this.y1[150]], [152,this.y1[151]], [153,this.y1[152]], [154,this.y1[153]], [155,this.y1[154]], [156,this.y1[155]], [157,this.y1[156]], [158,this.y1[157]], [159,this.y1[158]],[160,this.y1[159]],
              [161,this.y1[160]], [162,this.y1[161]], [163,this.y1[162]], [164,this.y1[163]], [165,this.y1[164]], [166,this.y1[165]], [167,this.y1[166]], [168,this.y1[167]],
            ],
            type: 'scatter',
            itemStyle: {
              color: '#5DC5E8'
            }
          },
          {
            name: '入站',
            symbolSize: 10,
            data:  [
              [1,this.y2[0]], [2,this.y2[1]], [3,this.y2[2]], [4,this.y2[3]], [5,this.y2[4]], [6,this.y2[5]], [7,this.y2[6]], [8,this.y2[7]], [9,this.y2[8]],[10,this.y2[9]],
              [11,this.y2[10]], [12,this.y2[11]], [13,this.y2[12]], [14,this.y2[13]], [15,this.y2[14]], [16,this.y2[15]], [17,this.y2[16]], [18,this.y2[17]], [19,this.y2[18]],[20,this.y2[19]],
              [21,this.y2[20]], [22,this.y2[21]], [23,this.y2[22]], [24,this.y2[23]], [25,this.y2[24]], [26,this.y2[25]], [27,this.y2[26]], [28,this.y2[27]], [29,this.y2[28]],[30,this.y2[29]],
              [31,this.y2[30]], [32,this.y2[31]], [33,this.y2[32]], [34,this.y2[33]], [35,this.y2[34]], [36,this.y2[35]], [37,this.y2[36]], [38,this.y2[37]], [39,this.y2[38]],[40,this.y2[39]],
              [41,this.y2[40]], [42,this.y2[41]], [43,this.y2[42]], [44,this.y2[43]], [45,this.y2[44]], [46,this.y2[45]], [47,this.y2[46]], [48,this.y2[47]], [49,this.y2[48]],[50,this.y2[49]],
              [51,this.y2[50]], [52,this.y2[51]], [53,this.y2[52]], [54,this.y2[53]], [55,this.y2[54]], [56,this.y2[55]], [57,this.y2[56]], [58,this.y2[57]], [59,this.y2[58]],[60,this.y2[59]],
              [61,this.y2[60]], [62,this.y2[61]], [63,this.y2[62]], [64,this.y2[63]], [65,this.y2[64]], [66,this.y2[65]], [67,this.y2[66]], [68,this.y2[67]], [69,this.y2[68]],[70,this.y2[69]],
              [71,this.y2[70]], [72,this.y2[71]], [73,this.y2[72]], [74,this.y2[73]], [75,this.y2[74]], [76,this.y2[75]], [77,this.y2[76]], [78,this.y2[77]], [79,this.y2[78]],[80,this.y2[79]],
              [81,this.y2[80]], [82,this.y2[81]], [83,this.y2[82]], [84,this.y2[83]], [85,this.y2[84]], [86,this.y2[85]], [87,this.y2[86]], [88,this.y2[87]], [89,this.y2[88]],[90,this.y2[89]],
              [91,this.y2[90]], [92,this.y2[91]], [93,this.y2[92]], [94,this.y2[93]], [95,this.y2[94]], [96,this.y2[95]], [97,this.y2[96]], [98,this.y2[97]], [99,this.y2[98]],[100,this.y2[99]],
              [101,this.y2[100]], [102,this.y2[101]], [103,this.y2[102]], [104,this.y2[103]], [105,this.y2[104]], [106,this.y2[105]], [107,this.y2[106]], [108,this.y2[107]], [109,this.y2[108]],[110,this.y2[109]],
              [111,this.y2[110]], [112,this.y2[111]], [113,this.y2[112]], [114,this.y2[113]], [115,this.y2[114]], [116,this.y2[115]], [117,this.y2[116]], [118,this.y2[117]], [119,this.y2[118]],[120,this.y2[119]],
              [121,this.y2[120]], [122,this.y2[121]], [123,this.y2[122]], [124,this.y2[123]], [125,this.y2[124]], [126,this.y2[125]], [127,this.y2[126]], [128,this.y2[127]], [129,this.y2[128]],[130,this.y2[129]],
              [131,this.y2[130]], [132,this.y2[131]], [133,this.y2[132]], [134,this.y2[133]], [135,this.y2[134]], [136,this.y2[135]], [137,this.y2[136]], [138,this.y2[137]], [139,this.y2[138]],[140,this.y2[139]],
              [141,this.y2[140]], [142,this.y2[141]], [143,this.y2[142]], [144,this.y2[143]], [145,this.y2[144]], [146,this.y2[145]], [147,this.y2[146]], [148,this.y2[147]], [149,this.y2[148]],[150,this.y2[149]],
              [151,this.y2[150]], [152,this.y2[151]], [153,this.y2[152]], [154,this.y2[153]], [155,this.y2[154]], [156,this.y2[155]], [157,this.y2[156]], [158,this.y2[157]], [159,this.y2[158]],[160,this.y2[159]],
              [161,this.y2[160]], [162,this.y2[161]], [163,this.y2[162]], [164,this.y2[163]], [165,this.y2[164]], [166,this.y2[165]], [167,this.y2[166]], [168,this.y2[167]],
            ],
            type: 'scatter',
            itemStyle: {
              color: 'red'
            },
          }
        ]
      })
    }

  },

}
</script>

<style scoped>

</style>
